<template>
  <div class="add-source-wrap" ref="container">
    <el-form ref="form" :model="form" label-width="150px" :rules="rules" class="add-source-form">

      <div class="form-section">
        <el-form-item label="来源名称" prop="source_name">
          <el-input v-model="form.source_name"></el-input>
        </el-form-item>
      </div>
      <el-form-item>
        <el-button type="primary" @click="submit">立即保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<style lang="scss">
.steps-main {
  // text-align: center;
}

.form-section {
  width: 70%;
  // margin-left:60px;

}

.success-tip {
  font-size: 16px;
  text-align: center;
  font-weight: bolder;
  color: #20a0ff;
}

.form-group.right {
  float: right;
  // margin-right: 20px;
}

.form-group.left {
  // margin-left: 130px;
}

.next-step-btn {

}

.add-source-form {
  max-width: 1100px;
  margin: 40px auto 0;
  padding-bottom:20px;
  overflow: hidden;
}

</style>
<script>
  import { Form, FormItem, Input, Button } from 'element-ui'
  import { mapActions } from 'vuex'
  // import RegionPicker from 'region-picker'
  // import QiniuUpload from '../components/QiniuUpload'
  // import data from 'region-picker/src/components/data.json'
  import N from '../lib/notification'
  import Q from 'q'

  export default {
    props: ['isEdit'],
    components: {
      [Form.name]: Form,
      [FormItem.name]: FormItem,
      [Input.name]: Input,
      [Button.name]: Button
      // [RegionPicker.name]: RegionPicker,
      // QiniuUpload
    },
    methods: {
      validateForm (formName) {
        return Q.Promise((resolve, reject) => {
          this.$refs[formName]
          .validate((valid) => {
            if (valid) {
              resolve(true)
            } else {
              reject(false)
            }
          })
        })
      },
      nextStep () {
        this.validateForm('form')
        .then((valid) => {
          if (this.active === 2) {
            setTimeout(() => {
              this.submit()
            }, 1000)
          } else {
            this.active ++
          }
        })
      },
      submit () {
        return this.saveSource(this.form)
        .then((response) => {
          if (response.data.errcode === 0) {
            if (this.isEdit === true) {
              N.notify('success', '保存成功!')
            } else {
              this.$emit('input', 'success')
              N.notify('success', '添加成功!')
            }
          } else {
            N.notify('error', response.data.errmsg)
          }
        }).catch((error) => {
          N.notify('error', '后台出了点小问题喔！请联系管理员!')
          console.log(error)
        })
      },
      ...mapActions({
        'saveSource': 'saveSource',
        'getSource': 'getSource'
      })
    },
    mounted () {
      if (this.isEdit === true) {
        this.sourceId = this.$route.params['id']
        this.getSource(this.$route.params).then((response) => {
          if (response.data.errcode === 0) {
            this.form = response.data.results
            this.form['company_logo'] = this.form.logo
          }
        })
      }

      const windowHeight = window.innerHeight
      const offsetTop = this.$refs['container'].offsetTop
      this.tabHeight = windowHeight - offsetTop
      if (this.isEdit !== true) {
        this.style = 'height:' + this.tabHeight + 'px; overflow-y: auto;'
      } else {
        this.style = ''
      }
    },
    data () {
      return {
        active: 1,
        sourceId: null,
        style: '',
        form: {
          'source_name': null
        },
        tabHeight: 700,
        // regions: data,
        rules: {
          'source_name': [
            { required: true, message: '请输入来源名称' }
          ]
        }
      }
    }
  }
</script>
